<!--
 * @Author: chunlai
 * @Date: 2025-08-19 09:32:40
 * @LastEditTime: 2025-08-19 09:46:41
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \0.newInsure\src\views\sign\components\protocols\TabberItem.vue
 * @Description: 
-->
<template>
  <div>
    <template v-if="item.suffixType === 'html'">
      <div v-html="item.fileUrl" class="notice-html"></div>
      <div class="notice-tick" v-if="item.tickContent">
        <van-checkbox
          v-model="tickCheck"
          shape="square"
          checked-color="#ee0a24"
          icon-size="14px"
        >
          {{ item.tickContent }}
        </van-checkbox>
      </div>
    </template>
    <div
      class="md_pic"
      v-else-if="item.suffixType === 'img'"
      @click="handlePreview(item.imgs)"
    >
      <img
        v-for="(ele, idx) in item.imgs"
        :key="item.fileName + idx"
        :src="ele"
      />
    </div>
    <van-image-preview v-model="showPreview" :images="images" />
  </div>
</template>

<script>
export default {
  name: "TabberItem",
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  components: {},
  data() {
    return {
      images: [],
      showPreview: false,
      tickCheck: false,
    };
  },
  computed: {},
  watch: {
    tickCheck(val) {
      this.item.tickCheck = val;
      this.$store.commit("readings/UPDATE_LIST_ITEM", {
        data: this.item,
        index: this.index,
      });
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      if (this.item.tickContent && this.item.isFinish) {
        this.tickCheck = true;
      }
    });
  },
  methods: {
    changeItem(e, item, index) {
      // const list = JSON.parse(JSON.stringify(this.lists));
      // const idx = list.findIndex(
      //   (ele) => ele.id == item.id
      // );
      // console.log(e.target.value);
      // if (idx >= 0) {
      // this.tickCheck = !e.target.value;
      // this.$forceUpdate();
    },
    handlePreview(arrs) {
      this.images = arrs;
      this.showPreview = true;
    },
  },
};
</script>
<style lang="less" scoped>
.notice-tick {
  padding: 0 14px 30px;
  margin-top: 10px;
}
.notice-html {
  padding: 0 14px;
  min-height: 60vh;
}
.md_pic {
  width: 100%;

  img {
    display: block;
    max-width: 100%;
  }
}
</style>
